<template>
    <div>
        <edu-dialog
            ref="eduDialog"
            title="添加先修课程"
            width="54%"
            :showButtons="true"
            v-on="{confirm:confirm,close:resetQuery}"
        >
            <div class="edu-page-warp">
                <div class="edu-page-title">添加默认值</div>
                <el-form
                    :model="queryCourseForm"
                    size="mini"
                    label-position="left"
                    label-width="80px"
                    inline
                >
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="课程区分:">
                                <el-radio v-model="weeksType" label="0">教学周</el-radio>
                                <el-radio v-model="weeksType" label="1" style="margin-left:8px;">实践周</el-radio>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="考核方式:">
                                <el-select v-model="examMode" size="mini">
                                    <el-option
                                        v-for="item in options.examMode"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="是否必修:">
                                <el-radio v-model="compulsory" label="1">是</el-radio>
                                <el-radio v-model="compulsory" label="0" style="margin-left:8px;">否</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <condition-card @reset="reset" @search="onSubmit">
                    <el-row :gutter="24">
                        <el-col :span="10">
                            <el-form-item label="开课学院:">
                                <el-select
                                    filterable
                                    v-model="queryCourseForm.college"
                                    size="mini"
                                    style="width: 100%"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in options.college"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </condition-card>

                <div class="btn-container">
                    <div style="float:left;">
                        <span>课程列表</span>
                        <el-input
                            :placeholder="$t('minor.course.inputPlaceholder')"
                            prefix-icon="el-icon-search"
                            v-model="queryCourseForm.condition"
                            style="width:240px;"
                            @keyup.enter.native="onSubmit"
                        ></el-input>
                    </div>
                    <div>
                        <span class="title-left">*已选择{{selectCount}}门课程</span>
                        <el-button type="primary" @click="clearSelect">清除选择</el-button>
                    </div>
                </div>
                <edu-table
                    :selection="true"
                    @page-change="pageChange"
                    @selection-change="selectionChange"
                    ref="eduTable"
                    :order="false"
                    :data="courses"
                    size="mini"
                    :total="total"
                    :pageSize="pageSize"
                    :pageNum="pageNum"
                >
                    <el-table-column
                        min-width="120"
                        label="课程编码"
                        prop="code"
                        show-overflow-tooltip
                    />
                    <el-table-column min-width="120" label="课程名称" show-overflow-tooltip>
                        <template slot-scope="props">{{ props.row.name }}</template>
                    </el-table-column>
                    <el-table-column min-width="120" label="学分">
                        <template slot-scope="props">{{ props.row.credits }}</template>
                    </el-table-column>
                    <el-table-column min-width="120" label="课时">
                        <template slot-scope="props">{{ props.row.period }}</template>
                    </el-table-column>
                </edu-table>
            </div>
            <span slot="footer">
                <div>
                    <el-button @click="closeDialog">{{ $t('message.cancel') }}</el-button>
                    <el-button type="primary" @click="confirmCourse">{{ $t('message.confirm') }}1</el-button>
                </div>
            </span>
        </edu-dialog>
    </div>
</template>
<script>
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import { getCourseListNew } from "common/src/api/courseTemplate";
import { addPreCourse } from "common/src/api/minor/minorCulturePlanManager";
export default {
    props: {
        randomId: {
            default: 0,
            type: Number
        },
        isElective: {
            default: "",
            type: String
        },
        params: {
            default: {},
            type: Object
        }
    },
    data() {
        return {
            pageSize: 20,
            pageNum: 1,
            selectCount: 0,
            queryCourseForm: {
                condition: "",
                college: "",
                status: 3
            },
            options: {
                examMode: [],
                college: [],
                compulsorys: [
                    { label: "是", value: 1 },
                    { label: "否", value: 0 }
                ]
            },
            courses: [],
            checkedCourses: [], // 选择的课程
            examMode: "",
            weeksType: "0",
            compulsory: "1"
        };
    },
    mounted() {},
    methods: {
        selectionChange(val) {
            this.checkedCourses = val;
            this.selectCount = val.length;
        },
        clearSelect() {
            this.$refs.eduTable.clearSelection();
        },
        openDialog() {
            this.$refs.eduDialog.open();
            this.initOptions();
            this.getCourses();
        },
        initOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_KSLX", "X_YX"]
            };
            queryDic(data).then(res => {
                this.options.college = [];
                this.options.examMode = [];
                UTILS.fillSelect(
                    {
                        trainingLevel: "X_KSLX",
                        college: "X_YX"
                    },
                    res.data,
                    this.options
                );
            });
        },
        loadOptions(optionKey, dataObj) {
            for (const key in dataObj) {
                this.options[optionKey].push({
                    value: key,
                    label: dataObj[key]
                });
            }
        },
        // 获取课程列表
        getCourses() {
            let params = Object.assign({}, this.queryCourseForm);
            params.pageNum_ = this.pageNum;
            params.pageSize_ = this.pageSize;
            params.isElective = this.isElective;
            getCourseListNew(params)
                .then(({ code, data }) => {
                    if (code == 200) {
                        this.courses = data.list;
                        this.total = data.total_;
                    }
                })
                .catch(e => {
                    this.$message({
                        type: "error",
                        message: "查询课程列表失败"
                    });
                });
        },
        // 课程查询条件重置
        reset() {
            this.resetQuery();
            this.onSubmit();
        },
        resetQuery() {
            this.queryCourseForm.condition = "";
            this.examMode = "";
            this.weeksType = "0";
            this.queryCourseForm.college = "";
        },
        // 课程查询
        onSubmit() {
            this.getCourses();
        },
        // 课程查询翻页
        pageChange({ pageSize, pageNum }) {
            if (this.pageSize != pageSize) {
                this.pageSize = pageSize;
                this.pageNum = 1;
            } else {
                this.pageNum = pageNum;
            }
            this.getCourses();
        },
        // 确定课程
        confirm() {
            if (this.checkedCourses.length === 0) {
                this.$message({
                    type: "warning",
                    message: "请选择一门课程"
                });
                return;
            }
            let params = this.params;
            params.prerequisiteCourses = this.checkedCourses.map(el => {
                return el.id;
            });
            addPreCourse(params).then(({ code, data }) => {
                if (code == 200) {
                    this.$emit("init");
                    this.$refs.eduDialog.close();
                    this.clean();
                }
            });
        },
        clean() {
            this.courses = [];
            this.reset();
        }
    }
};
</script>


<style scoped>
.btn-container {
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
}
.title-left {
    margin-right: 20px;
}
</style>
